import React, { useState } from 'react';
import { Rate } from 'antd';
import '../Assets/CommentSection.css';

const CommentSection = () => {
    const [comments, setComments] = useState([]);
    const [commentText, setCommentText] = useState('');
    const [userName, setUserName] = useState('');
    const [rating, setRating] = useState(0);

    const handleSubmit = (e) => {
        e.preventDefault();
        const newComment = {
            userName, // 用户名称
            text: commentText,
            rating, // 添加用户的评分
            timestamp: new Date().toISOString()
        };
        setComments([...comments, newComment]);
        setCommentText('');
        setUserName('');
        setRating(0); // 提交后重置评分
    };

    return (
        <div className="comment-section">
            <form onSubmit={handleSubmit} className="comment-form">
                <input
                    type="text"
                    className="comment-input"
                    value={userName}
                    onChange={(e) => setUserName(e.target.value)}
                    placeholder="您的姓名"
                    required
                />
                <textarea
                    className="comment-textarea"
                    value={commentText}
                    onChange={(e) => setCommentText(e.target.value)}
                    placeholder="写下你的评论..."
                    required
                />
                <h2>评分:</h2>
                <Rate
                    onChange={setRating}
                    value={rating}
                />
                <button type="submit" className="comment-submit">发表评论</button>
            </form>
            <div className="comment-list">
                {comments.map((comment, index) => (
                    <div className="comment" key={index}>
                        <strong>{comment.userName}：</strong>
                        <p>{comment.text}</p>
                        <Rate disabled value={comment.rating} /> {/* 显示评分 */}
                        <small>发表于: {comment.timestamp}</small>
                    </div>
                ))}
            </div>
        </div>
    );
};

export default CommentSection;
